import React, { useState, useMemo, useCallback } from 'react';

export default function Test4(props) {
    const [x, setX] = useState(100);
    const [y, setY] = useState(10);
    
    const setSum = ()=>{
        let sum = 0;
        for (let i = 0; i < x; i++) {
            sum+=i;
        }
        return sum;
    }

    // 这个方法在y改变的时候会触发,虽然y不是他的依赖
    const getSum = ()=>{
        let sum = setSum();
        console.log('正常获取sum值');
        return sum;
    }

    // 使用useMemo后,y改变不会触发这个函数,相当于vue的计算属性。用于缓存数据对象,返回新的对象
    const getSum1 = useMemo(()=>{
        let sum = setSum();
        console.log('useMemo获取sum值');
        return sum;
    }, [x])

    // const emitChild1 = ()=>{
    //     setX(x +2);
    //     console.log('正常传给子组件的函数---', x);
    // }

    // 用于缓存函数
    const emitChild2 = useCallback(()=>{
        setX(x +2);
        console.log('useCallback传给子组件的函数---', x);
    }, [x]); // 第二个参数不填的话,x永远是初始值;填了的话,就会跟着改变;填[]就执行一次

    return <div>
        <div className='demo_box'>
            <p>x值为: {x}</p>
            <p>求和为: {getSum()}</p>
            <p>求和为: {getSum1}</p>
            <p>
                <button onClick={()=> setX( x+1 )}>x+1</button>
                <button onClick={()=> setX( x-1 )}>x-1</button>
            </p>
            <p onClick={()=> setY( y-1 )}>改变y -- {y}</p>
            <Child cacheFn={emitChild2}></Child>
        </div>
    </div>
};

const Child = (props)=>{
    console.log('子组件加载...', props);
    return <div>
        <p onClick={props.cacheFn}>我是子组件</p>
    </div>  
}


// react-router-dom6.0  路由跳转及传参 https://www.cnblogs.com/Regina-wisdom/p/15479240.html
